<template>
  <Nav class="nav" :parallax_show="true"></Nav>
  <section id="sectionone" class="screen">
    <div id="scene">
      <div data-depth="0.1" class="bg">
        <img src="@/assets/images/background.png" alt="Background" />
      </div>
      <div data-depth="0.2" class="rock1">
        <img class="rock1" src="@/assets/images/rock.png" alt="Rock" />
      </div>
      <div data-depth="1.2" class="earth">
        <img class="earth" src="@/assets/images/earth.png" alt="Earth" />
      </div>
      <div data-depth="0.7" class="saturn">
        <img class="saturn" src="@/assets/images/saturn.png" alt="" />
      </div>
      <div data-depth="0.3" class="jupiter">
        <img class="jupiter" src="@/assets/images/jupiter.png" alt="" />
      </div>
      <div data-depth="0.1" class="text">
        <h1>iReader</h1>
      </div>
      <div data-depth="0.4" class="mid">
        <img src="@/assets/images/mid.png" alt="Mid" />
      </div>
      <div data-depth="0.1" class="fore">
        <img class="fore" src="@/assets/images/foreground.png" alt="Foreground" />
      </div>
    </div>
  </section>
</template>

<script setup>
import { onMounted, onUnmounted } from 'vue';
import Swiper from 'swiper';
import 'swiper/css';
import 'swiper/css/pagination';
import Parallax from 'parallax-js/src/parallax.js';
import { gsap } from 'gsap';

import Nav from '@/components/Nav/nav1.vue';

const keys = ["Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune"];
let slider;

onMounted(() => {
  slider = new Swiper('.swiper', {
    slidesPerView: 'auto',
    spaceBetween: 150,
    centeredSlides: true,
    mousewheel: true,
    pagination: {
      el: '.planet-links',
      clickable: true,
      renderBullet: (index, className) => `<div class="${className}">${keys[index]}</div>`,
    },
  });

  slider.on('slideChange', () => {
    gsap.to('.slide-text span', { duration: 0.2, x: '-100px' });
    gsap.to('.slide-number span', { duration: 0.2, x: '-100px' });
    gsap.to('.slide-detail span', { duration: 0.5, x: '-1000px' });
    gsap.to('.slide-detail-facts div', { duration: 0.5, x: '-1000px' });
    gsap.to('.swiper-slide-active', { duration: 0.5, scale: 0.85 });
    gsap.to('.swiper-slide .slide-img', { duration: 1, rotation: 20 });
  });

  const scene = document.getElementById('scene');
  if (scene) {
    new Parallax(scene);
  }
});

</script>

<style scoped>
.nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 10%;
  z-index: 100;
  border: none;
  color: #fff;
  opacity: 1;
  border: none;
}

body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  font-family: "Roboto";
  list-style: none;
  box-sizing: border-box;
  background: #000;
}

section {
  height: 20vh;
  overflow: hidden;
}

.bg img {
  width: 110vw;
  height: 20vh;
  filter: brightness(0.6);
}

.rock1 {
  width: 25%;
  height: auto;
  position: absolute;
  left: 5vw;
  top: 8vh;
  z-index: 1;
  filter: brightness(0.7);
}

.rock1 img {
  width: 15%;
  height: auto;
  filter: brightness(0.5);
}

.text h1 {
  font-family: "AlphaCentauri" !important;
  font-size: 3vw;
  color: #fff;
  letter-spacing: 10px;
  position: absolute;
  top: 10vh;
  left: 45vw;
  opacity: 0.3;
}

.earth {
  width: 25%;
  height: auto;
  position: absolute;
  left: 50vw;
  top: 5vh;
  z-index: 1;
  filter: brightness(0.7);
}

.jupiter {
  width: 25%;
  height: auto;
  position: absolute;
  left: 38vw;
  top: 7vh;
  z-index: 1;
  filter: brightness(0.7);
}

.saturn {
  width: 25%;
  height: auto;
  position: absolute;
  left: 75vw;
  top: 3vh;
  z-index: 1;
  filter: brightness(0.7);
}

.mid {
  left: -150px !important;
  bottom: -100px !important;
  top: unset !important;
}

.mid img {
  width: 15%;
  height: auto;
  z-index: 2;
  left: -20px;
  top: 15vh !important;
  filter: brightness(0.8);
}

.fore {
  width: 25%;
  height: auto;
  position: absolute;
  left: 0;
  top: 5vh;
  z-index: 1;
  filter: brightness(0.7);
}

.fore img {
  width: 15%;
  height: auto;
  z-index: 3;
  filter: brightness(0.5);
}

.planet-links .swiper-pagination-bullet {
  opacity: 0.2;
  outline: none;
}

.planet-links .swiper-pagination-bullet-active {
  color: #fff;
  opacity: 1;
}

.swiper-pagination-clickable .swiper-pagination-bullet {
  background: transparent;
}

.swiper-slide:nth-child(1) .slide-img {
  width: 25%;
  height: auto;
  background-image: url('@/assets/images/mercury.png');
}

.swiper-slide:nth-child(2) .slide-img {
  width: 25%;
  height: auto;
  background-image: url('@/assets/images/venus.png');
}

.swiper-slide:nth-child(3) .slide-img {
  width: 25%;
  height: auto;
  background-image: url('@/assets/images/earth1.png');
}

.swiper-slide:nth-child(4) .slide-img {
  width: 25%;
  height: auto;
  background-image: url('@/assets/images/mars.png');
}

.swiper-slide:nth-child(5) .slide-img {
  width: 25%;
  height: auto;
  background-image: url('@/assets/images/jupiter.png');
}

.swiper-slide:nth-child(6) .slide-img {
  width: 25%;
  height: auto;
  background-image: url('@/assets/images/saturn.png');
}

.swiper-slide:nth-child(7) .slide-img {
  width: 25%;
  height: auto;
  background-image: url('@/assets/images/uranus.png');
}

.swiper-slide:nth-child(8) .slide-img {
  width: 25%;
  height: auto;
  background-image: url('@/assets/images/neptune.png');
}

.slide-number p {
  font-size: 40px;
  font-family: 'AlphaCentauri' !important;
  color: #fff;
  position: relative;
}

.slide-number p span {
  position: absolute;
}

.slide-detail p {
  font-size: 14px;
  color: #fff;
  position: relative;
  opacity: 0.8;
  line-height: 30px;
}

.slide-detail p span {
  position: absolute;
}

.slide-detail-facts div {
  display: flex;
  position: relative;
}

.slide-detail-facts div h5 {
  margin-right: 20px;
}

.slide-text h4 {
  color: #fff;
  font-size: 100px;
  position: relative;
}

.slide-text h4 span {
  position: absolute;
}
</style>